<template>
<div>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>公众</el-breadcrumb-item>
      <el-breadcrumb-item>课程信息</el-breadcrumb-item>
      <el-breadcrumb-item>课程详细内容信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入章节顺序" clearable @clear="getCourseList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getCourseList" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>


      <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">

      <el-table-column prop="ord" label="顺序" width="80" align="center">
      </el-table-column>
      <el-table-column prop="coursedata" label="章节内容" width="500" align="center">
      </el-table-column>
      <el-table-column prop="coursetime" label="时长" width="80" align="center">
      </el-table-column>
      <el-table-column prop="goal" label="目标" align="center">
      </el-table-column>


    </el-table>

    </div>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>
</div>
</template>


<script>
  export default {

    created(){
      this.getCourseList();
    },
    data() {
      return {
        queryInfo:{
          query:'',//查询信息
          role:this.$session.get('bulls'),
          pageNum:1,
          pageSize:4
        },
        List:[],
        total:0,
        addDialogVisible:false,
        editDialogVisible:false,
        infoDialogVisible:false,
        Form:{
          courseid:'',
          ord:'',
          coursedata:'',
          coursetime:'',
          goal:'',
          secondindicid:'',

        },
        FormRules: {

        },
      }
    },


    methods: {
      async getCourseList () {
        const { data: res } = await this.$http.get("Publics/CoursePage" ,{ params: this.queryInfo });
        this.List = res.data;
        this.total = res.numbers;
      },
      handleSizeChange (newSize) {
        this.queryInfo.pageSize = newSize;
        this.getCourseList();
      },
      handleCurrentChange (newPage) {
        this.queryInfo.pageNum = newPage;
        this.getCourseList();
      },
      addDialogClose () {
        this.$refs.addFormRef.resetFields();
      },
      editDialogClose () {
        this.$refs.editFormRef.resetFields();
      },
      logout(){
        window.sessionStorage.clear();
        this.$router.push({ path: "/login"});
      },

    }
  }
</script>




<style scoped>
  .el-header{
    background: lightslategray;
    color: white;
    font-size: 25px;
    align-items: center;
    justify-content: space-between;
    display: flex;
  }
  .el-main{
    background-color: whitesmoke;
  }

</style>
